<template>
    <div class="wrapper">
        <hr class="hr-solid-content" data-content="cross-fade">
        <p>Chrome需要使用-webkit-cross-fade(img1, img2, percentage), 作用是让第一个图片与第二个图片percentage透明混合</p>
        <div class="cross-fade-container"></div>
    </div>
</template>

<style scoped>
.wrapper {
    height: 100%;
    padding: 8px;
    overflow: auto;
}

.cross-fade-container {
    width: 400px;
    height: 300px;
    /* --transparent: url(); */
    --transparent: linear-gradient(to right, #ef1b1b, transparent);
    background-image: -webkit-cross-fade(var(--transparent), url(../../assets/css/cross-fade/gril.jpg), 40%);
    background-size: cover;
}
</style>